import React, { Component } from 'react';
import { Menu } from 'antd'; // 引入菜单组件
import { Route, Switch } from 'react-router-dom'
import Func from './func'
import {Search} from './search'
import Simulation from './simulation'
import UseContext from './context/useContext'
import UseMemo from './usememo/usememo'
import UseLocalStorage from './diyhooks/diyhooks'
import SimulateLife from './monismzq/simulateLife'

export default class Test extends Component {
  onMenuClick = (e) => { // 菜单被点击的回调
    this.props.history.push(e.key); // 跳转到响应的页面
  }
  render() {
    const items = [
      {
        key: '/test/func', // key指定为路由的名称，我们配置为路由的path，用来跳转
        label: '函数组件', // 菜单显示内容
      },
      {
        key: '/test/search', // key指定为路由的名称，我们配置为路由的path，用来跳转
        label: '搜索-useEffect', // 菜单显示内容
      },
      {
        key: '/test/simulation', // key指定为路由的名称，我们配置为路由的path，用来跳转
        label: '试验useEffect', // 菜单显示内容
      },
      {
        key: '/test/usecontext', // key指定为路由的名称，我们配置为路由的path，用来跳转
        label: 'useContext', // 菜单显示内容
      },
      {
        key: '/test/usememo', // key指定为路由的名称，我们配置为路由的path，用来跳转
        label: 'useMemo', // 菜单显示内容
      },
      {
        key: '/test/diyhooks', // key指定为路由的名称，我们配置为路由的path，用来跳转
        label: 'diyhooks', // 菜单显示内容
      },
      {
        key: '/test/simulateLife', // key指定为路由的名称，我们配置为路由的path，用来跳转
        label: '模拟生命周期的封装', // 菜单显示内容
      },
    ];
    return (
      <div>

          <Menu items={items} mode="horizontal" onClick={this.onMenuClick}></Menu>
       
        <Switch>
          <Route path="/test/func" component={Func}></Route>
          <Route path="/test/search" component={Search}></Route>
          <Route path="/test/simulation" component={Simulation}></Route>
          <Route path="/test/usecontext" component={UseContext}></Route>
          <Route path="/test/usememo" component={UseMemo}></Route>
          <Route path="/test/diyhooks" component={UseLocalStorage}></Route>
          <Route path="/test/simulateLife" component={SimulateLife}></Route>
        </Switch>
      </div>
    );
  }
}
